<template>
  <view class="ver-layout">
    <u-input class="input-opinions" v-model="inputValue" placeholder="请输入拒绝理由" type="textarea"/>
    <view class="action-layout">
      <view class="hor-layout-center" style="display: none">
        <view class="check-view ver-layout-center-all" :class="{'select':checked}" @click="checkChange">
          <i class="iconfont check-icon">&#xe72e;</i>
        </view>
        <view class="hint-title">审批意见通过消息转发给</view>
        <view class="hint-name">王可可</view>
      </view>
      <view class="action-btn" @click="refuseClick">确认拒绝</view>
      <u-modal v-model="confirmObj.show" :content="confirmObj.content" :show-title="false" show-cancel-button
               @confirm="confirmAction" @cancel="confirmObj.show=false"></u-modal>
    </view>
  </view>
</template>

<script>
import {AskBreakApprovalApi} from "@/api/askBreak.js"
import {breakDetail} from "@/router.js"

let engine = new AskBreakApprovalApi()
export default {
  name: "approvalOpinion",
  data() {
    return {
      title: '',
      inputValue: '',
      checked: false,
      confirmObj: {
        show: false,
        content: '拒绝后流程将结束，确认拒绝吗？'
      },
      breakObj: {}
    }
  },
  onLoad(options) {
    this.breakObj = options
  },
  methods: {
    checkChange() {
      this.checked = !this.checked
    },
    refuseClick() {
      if (!this.inputValue) {
        this.$u.toast("请输入拒绝理由!")
        return
      }
      this.confirmObj.show = true
    },
    confirmAction() {
      let {leave_type, id} = this.breakObj, leave_id = id, reply_content = this.inputValue
      engine.refuseApproval({leave_type, leave_id, reply_content}).then(res => {
        this.$u.toast(res.message)
        if (res.code === 200) {
          this.$u.pageCallBackDelay(breakDetail, 'getApprovalDetail', '')
          this.$u.routeDelay({type: 'back'})
        }
      })
    }
  }
}
</script>

<style scoped>
.input-opinions {
  width: calc(100% - 24px);
  margin: 20px 12px;
}

.action-layout {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 0px 12px;
  padding-top: 15px;
  padding-bottom: 11px;
  border-top: 1px solid #DADADA;
}

.action-btn {
  /*margin-top: 20px;*/
  width: 100%;
  height: 40px;
  background: #42B4AB;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  /* 文本样式 */
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

.check-view {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: white;
  border: 1px solid gray;
}

.check-view.select {
  background: #42B4AB;
  border: 1px solid #42B4AB;
}

.check-icon {
  color: white;
  font-size: 10px;
}

.hint-title {
  margin-left: 7px;
  line-height: 13px;
  font-size: 13px;
  color: #000000;
}

.hint-name {
  margin-left: 6px;
  font-size: 15px;
  line-height: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #42B4AB;
}
</style>
